<template>
  <div class="button-demo">
    <h3 class="title">基本</h3>
    <div class="buttons">
      <d-button>默认</d-button>
      <d-button color="primary">主色系按钮</d-button>
      <d-button :text="true">文字按钮</d-button>
      <d-button :no-border="true">文字按钮2</d-button>
    </div>
    <h3 class="title">颜色</h3>
    <div class="buttons">
      <d-button color="primary">主色系按钮</d-button>
      <d-button color="green">绿色按钮</d-button>
      <d-button color="blue">蓝色按钮</d-button>
      <d-button color="yellow">黄色按钮</d-button>
      <d-button color="red">红色按钮</d-button>
      <d-button color="gray">灰色按钮</d-button>
    </div>
    <h3 class="title">文字颜色</h3>
    <div class="buttons">
      <d-button :text="true" text-color="primary">主色系按钮</d-button>
      <d-button :text="true" text-color="green">绿色按钮</d-button>
      <d-button :text="true" text-color="blue">蓝色按钮</d-button>
      <d-button :text="true" text-color="yellow">黄色按钮</d-button>
      <d-button :text="true" text-color="red">红色按钮</d-button>
      <d-button :text="true" text-color="gray">灰色按钮</d-button>
    </div>
    <h3 class="title">大小</h3>
    <div class="buttons">
      <d-button size="l">Large</d-button>
      <d-button size="s">Small</d-button>
      <d-button size="xs">Extra Small</d-button>
    </div>
    <h3 class="title">禁用</h3>
    <div class="buttons">
      <d-button :disabled="true">Default</d-button>
      <d-button color="primary" :disabled="true">主色系按钮</d-button>
      <d-button text="true" :disabled="true">Text按钮</d-button>
      <d-button color="blue" :disabled="true" icon="d-icon-completed">Icon</d-button>
    </div>
    <h3 class="title">图标</h3>
    <div class="buttons">
      <d-button icon="d-icon-inbox"></d-button>
      <d-button icon="d-icon-search" color="primary">Search</d-button>
      <d-button icon="d-icon-outbox" color="green">Upload</d-button>
      <d-button icon="d-icon-refresh" color="yellow">Refresh</d-button>
    </div>
    <h3 class="title">按钮组大小</h3>
    <div class="buttons">
      <d-button-group>
        <d-button color="primary" icon="d-icon-left" v-tooltip content="前进"></d-button>
        <d-button color="primary" icon="d-icon-right" v-tooltip content="后退"></d-button>
      </d-button-group>
      <d-button-group>
        <d-button icon="d-icon-inbox">Create</d-button>
        <d-button icon="d-icon-trash" :disabled="true">Delete</d-button>
        <d-button icon="d-icon-refresh">Refresh</d-button>
        <d-button icon="d-icon-star">Favorite</d-button>
      </d-button-group>
      <d-button-group :circle="true">
        <d-button color="primary" icon="d-icon-left"></d-button>
        <d-button color="primary" icon="d-icon-right"></d-button>
      </d-button-group>
    </div>
    <h3 class="title">Button Group Sizes</h3>
    <div class="buttons">
      <d-button-group size="l">
        <d-button icon="d-icon-inbox">Create</d-button>
        <d-button icon="d-icon-trash" :disabled="true">Delete</d-button>
        <d-button icon="d-icon-refresh">Refresh</d-button>
        <d-button icon="d-icon-star">Favorite</d-button>
      </d-button-group>
      <d-button-group :circle="true" size="s">
        <d-button icon="d-icon-left"></d-button>
        <d-button icon="d-icon-right"></d-button>
      </d-button-group>
    </div>
  </div>
</template>

<script>
export default {
  name: 'buttonDemo'
}
</script>

<style lang="stylus" scoped>
.button-demo
  .buttons
    margin-bottom 10px
</style>
